<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="submit_questionnaire" class="mui-icon mui-icon-right-nav mui-pull-right" 
							style="color: white;font-size: 14px;line-height: 27px;">提交</a>
			<h1 id="title" class="mui-title title-color">每日打卡（未打卡）</h1>
		</header>
		<div class="mui-content" style="font-family: 'microsoft yahei'">
			<div class="mui-card">
				<h5 class="mui-card-content-inner" style="color: black; font-weight: bold">国内/国外？</h5>
				<div id="country_div" class="mui-input-group">
					<div class="mui-input-row mui-radio mui-left">
						<label>国内省市</label>
						<input id="inCountryRadio" name="country" type="radio" value="1" checked>
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>国外</label>
						<input id="notInCountryRadio" name="country" type="radio" value="0">
					</div>
				</div>
			</div>
			<div class="mui-card">
				<h5 class="mui-card-content-inner" style="color: black; font-weight: bold">具体所在地点</h5>
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>经度</label>
						<input id="longitudeField" type="text" class="mui-input-clear" placeholder="经度(非必填)" readonly>
					</div>
					<div class="mui-input-row">
						<label>纬度</label>
						<input id="latitudeField" type="text" class="mui-input-clear" placeholder="纬度(非必填)" readonly>
					</div>
					<div class="mui-input-row">
						<label>详细地址</label>
						<input id="currentAddressField" type="text" class="mui-input-clear" placeholder="请输入具体所在地点">
					</div>
					<div class="mui-text-center" style="margin-top: 10px; margin-bottom: 10px;">
						<button id="locateBtn" type="button" class="mui-btn mui-btn-blue">定位当前位置</button>
					</div>
				</div>
			</div>
		</div>
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init();
		
			// 获取用户全局对象和页面元素
			var userinfo;
			// 获取单选按钮
			var inCountryRadio = document.getElementById("inCountryRadio");
			var notInCountryRadio = document.getElementById("notInCountryRadio");
			// 获取文本框
			var longitudeField = document.getElementById("longitudeField");
			var latitudeField = document.getElementById("latitudeField");
			var currentAddressField = document.getElementById("currentAddressField");
			// 获取按钮
			var locateBtn = document.getElementById("locateBtn");
			var submit_questionnaire = document.getElementById("submit_questionnaire");
			// 获取标题
			var titleLabel = document.getElementById("title");
			
			mui.plusReady(function() {
				userinfo = app.getGlobalUserInfo();
				
				// 查询当前学生今日是否已经打过卡，打过卡就把信息回显到页面上
				searchIfPunchTheClockToday();
				
				// 点击定位按钮，进行定位
				locateBtn.addEventListener("tap", function() {
					// 通过定位模块获取位置信息
					plus.geolocation.getCurrentPosition(
						function(position) {
							longitudeField.value = position.coords.longitude;
							latitudeField.value = position.coords.latitude;
							currentAddressField.value = position.addresses;
						}, 
						function (e) {
							app.showToast("获取定位位置信息失败：" + e.message, "error");
						},
						{
							geocode:true
						}
					);
				});
				
				// 点击提交按钮，提交学生打卡信息
				submit_questionnaire.addEventListener("tap", function() {
					// 获取单选框选中的结果：用户是否在国内，inCountry: 1，在国内；0，在国外
					var inCountry = mui("#country_div input:checked")[0].value == 1;
					// console.log("单选框值：" + inCountry);
					mui.ajax(app.serverUrl + "/user/student/punchTheClock", {
						data:{
							user_id: userinfo.user_id,
							inCountry: inCountry,
							longitude: longitudeField.value,
							latitude: latitudeField.value,
							currentAddress: currentAddressField.value
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(data){
							if(data.status == 200) {
								app.showToast("打卡成功！", "success");
								searchIfPunchTheClockToday();
							} else {
								app.showToast(data.msg, "error");
							}
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							console.log(type);
						}
					});
				});
			});
			
			// 查询当前学生今日是否已经打过卡，打过卡就把信息回显到页面上，
			// 隐藏提交按钮，将页面表单元素设置为不可用
			function searchIfPunchTheClockToday() {
				mui.ajax(app.serverUrl + "/user/student/searchIfPunchTheClockToday",{
					data:{
						user_id: userinfo.user_id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						if(data.status == 200) {
							var punchTheClockVO = data.data;
							if(punchTheClockVO == null) {
								return;
							}
							// 单选框回显值
							if(punchTheClockVO.inCountry) {
								inCountryRadio.checked = true;
							} else {
								notInCountryRadio.checked = true;
							}
							// 单选框不可更改
							inCountryRadio.readOnly = true;
							notInCountryRadio.readOnly = true;
							// 文本框回显打卡信息
							longitudeField.value = punchTheClockVO.longitude;
							latitudeField.value = punchTheClockVO.latitude;
							currentAddressField.value = punchTheClockVO.currentAddress;
							// 文本框修改为只读
							longitudeField.readOnly = true;
							latitudeField.readOnly = true;
							currentAddressField.readOnly = true;
							
							// 隐藏按钮
							submit_questionnaire.style.display = "none";
							locateBtn.style.display = "none";
							// 标题修改为已打卡
							titleLabel.innerHTML = "今日打卡（已打卡）";
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
			
		</script>
	</body>
</html>
